<%@ page import="com.guangzi.common.Constants" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();

    String time=(String)request.getAttribute("time");
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户中心</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="<%=path%>/css/common.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/user.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/bootstrap.min.css">
    <script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/common.js"></script>
    <script src="<%=path%>/js/user.js" type="text/javascript"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--弹出框样式-->
<%--    <link rel="stylesheet" href="<%=path%>/css/lyj/sweetalert.css"/>--%>
<%--    <script type="text/javascript" src="<%=path%>/js/lyj/sweetalert-dev.js"></script>--%>

    <style type="text/css">
        #btns {
            transition: transform 0.1s;
        }

        #btns:hover {
            cursor: pointer;
            transform: translate(0, -10px);
        }

        @keyframes mymove {
            0% {
                background-position: 0% 0%;
            }
            50% {
                background-position: 50% 100%;
            }
            100% {
                background-position: 100% 0%;
            }

        }

    </style>

</head>
<body >
<%@include file="../common/header.jsp"%>
<!--个人中心-->
<div class="wrapper wbgcolor" style="background-image: url('<%=path%>/images/bg.png')">
    <div class="w1200 personal">
        <%@include file="../common/leftList.jsp"%>
        <div class="personal-main">
            <div class="pmain-profile"
                 style="border-radius: 15px;margin-left: 7px;box-shadow: 0 0 9px 2px #403f4087 inset;width: 923.984;background-color: #ffffff;">
                <div class="pmain-welcome"> <span class="fl" style="margin-top: 5px;color: #0caffe"><span id="outLogin">晚上好，</span> <strong style="color: #8bc337;font-size: large; ">${name}</strong> &nbsp;&nbsp;喝一杯下午茶，让心情放松一下~</span>

<%--                    <span class="fr">上次登录时间：<%=time%>  </span>--%>

                </div>
                <div class="pmain-user">
                    <div class="user-head"> <span id="clickHeadImage" class="head-img" title="点击更换头像" onclick="header.click()">

                  <form  method="post" id="longinForm" name="longinForm" action="" enctype="multipart/form-data">
                  <input type="hidden" name="userPhotoUploadForm" value="userPhotoUploadForm">

                  <span id="userPhotoUploadForm:photo">

                      <c:if test="${face==null}">
                          <img id="userPhotoUploadForm:photoImage" src="<%=path%>/images/touxiang.png" alt="" style="width:88px;height:88px;z-index:0;">
                      </c:if>
                       <c:if test="${face!=null}">
                           <img id="userPhotoUploadForm:photoImage" src="<%=path%>/${face}" alt="" style="width:88px;height:88px;z-index:0;">
                       </c:if>

                      <i class="headframe" style="z-index:0;"></i>-
                  <div id="userPhotoUploadForm:shangchuan-btn" class="ui-fileupload ui-widget" style="z-index:0;">
                    <div class="ui-fileupload-buttonbar ui-corner-top"><span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-fileupload-choose" role="button"><span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"></span><span class="ui-button-text ui-c"></span>
                      <input type="file" id="header" name="header"  style="display:none">
                      </span></div>
                    <div class="ui-fileupload-content ui-widget-content ui-corner-bottom">
                      <table class="ui-fileupload-files">
                        <tbody>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  </span>
                  <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="2696547217205030168:-301641994240890871" autocomplete="off">
                </form>


            </span>
<%--                        <span class="head-icon"> <a href="#"><i title="第三方资金账户未认证" class="headiconbg headicon01"></i></a> --%>
<%--                        <a href="#"><i class="headiconbg headicon2"></i></a> --%>
<%--                        <a href="#"><i class="headiconbg headicon03"></i></a> </span> --%>

                    </div>
                    <div class="user-info user-info1">
                        <ul>
                            <li><span><strong style="font-size: large">用户名:</strong></span><span onclick="exportExcel('/luser/uploadHeader','longinForm')" style="font-size:xx-large;font-family: 幼圆 ">${name}</span></li>
                            <li><span style="color: grey">该用户还未设置个性签名呢~~~</span></li>
                           <%-- <li>您还未开通第三方支付账户，请 <a class="pmain-log" href="<%=path%>/page/disanfang">立即开通</a>以确保您的正常使用和资金安全。 </li>--%>
                        </ul>
                    </div>
                </div>

                <div class="pmain-money">
                    <ul>
                        <li class="none"><span><em>奖励金额</em><i id="zhze" class="markicon"></i><span class="arrow-show1" style="display:none;">可用余额+待收本息</span><span class="icon-show1" style="display:none;"></span></span> <span class="truemoney"><i class="f26 fb">${userMoneyVO.jlmoney} </i> 元</span> </li>
                        <li><span><em>可用余额</em><i id="dsbx" class="markicon"></i><span class="arrow-show2" style="display:none;">未到账的投资项目的本金、利息总额</span><span class="icon-show2" style="display:none;"></span></span> <span class="truemoney"><i class="f26 fb">${userMoneyVO.kymoney} </i>元</span> </li>
                        <li><span><em>投资总额</em><i id="ljsy" class="markicon"></i><span class="arrow-show3" style="display: none;">已到账的投资收益+未到账的投资收益</span><span class="icon-show3" style="display: none;"></span></span> <span class="truemoney"><i class="f26 fb c-pink">${userMoneyVO.tzmoney} </i> 元</span> </li>
                    </ul>
                </div>
            </div>
            <script type="text/javascript">
                //<![CDATA[
                $(function(){
                    $("#clickHeadImage").click(function(){
                        $(this).find('span').removeClass('ui-state-hover');
//                        document.getElementById("userPhotoUploadForm:shangchuan-btn_input").click();
                    });
                    var safeLevel = "低";
                    if(safeLevel=="高"){
                        $(".pmain-user .user-info li .safe-level .onlevel").css("background-color","#f1483c");
                    }

                    $("#clickHeadImage span").hover(function(){
                        $(this).removeClass('ui-state-hover');
                    });

                    var myDate = new Date();
                    var h = myDate.getHours();
                    if(h>11 && h<19){
                        $("#outLogin").html("下午好，");
                    }else if(h>18){
                        $("#outLogin").html("晚上好，");
                    }else{
                        $("#outLogin").html("上午好，");
                    }
                });
                //]]>
            </script>
            <div class="pmain-connent" style="border-radius: 15px;margin-left: 7px;box-shadow: 0 0 9px 2px #403f4087 inset;
            width: 923.984;background-color: #ffffff;height: 220px;
              background-image: url('<%=path%>/images/userinfo_04.jpg') ">



            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<!--咨询聊天-->
<!-- 按钮触发模态框 -->
<span id="btns" style="position:absolute; right:10px; bottom:10px;">
			<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" style="z-index: 999"  data-toggle="modal" data-target="#myModal">联系客服</button></span>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">实时聊天</h4>
            </div>
            <div class="modal-body">
                <div id="message">
                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-primary">
                                <div class="panel-heading"> 咨询信息

                                </div>
                                <div id="msg" class="panel-body" style="height: 200px;overflow: auto;"></div>
                                <div class="row" style="margin:15px 60px">
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="msgsend" />
                                    </div>
                                    <div class="col-lg-4">
                                        <button onclick="send()"  id="sendmsg"  class="btn btn-primary " >发送</button>

                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeWebSocket() ">断开连接</button>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <script>
        let username = "user";
        // let  ue = UE.getEditor('editor');;
        // 请求url
        let websocket = new WebSocket("ws://localhost:8888/websocket/" + username);


        websocket.onerror = function() {
            setMessageInnerHTML("连接失败，请稍后重试！！");
        }

        websocket.onopen = function() {
            setMessageInnerHTML("连接成功");
        }
        // 监听服务器发送过来的所有消息
        websocket.onmessage = function(event) {
            //  alert('--'+event.data);
            setMessageInnerHTML(event.data);
        }
        websocket.onclose = function() {
            setMessageInnerHTML("断开连接");
        }

        window.onbeforeunload = function() {
            if (confirm('确定关闭窗口吗')) {
                websocket.close();
            }

        }

        function setMessageInnerHTML(innerHTML) {
            console.log(innerHTML.indexOf(username) + "-------------- user");
            if (innerHTML.indexOf(username)) {
                document.getElementById("msg").innerHTML +=
                    "<div style='height:auto;width:400px;margin-top:10px;'><div style='float:left;margin-top: 10px;'>" +
                    "<img src='<%=path%>/images/touxiang.png'; width=50px;height=50px; style='float:left;border-radius:15px'/>" +
                    "<div style='margin-left:10px;float:left;text-align:left; background-color:beige;border-radius:5px; width:200px;height:auto;margin-top:10px;'>" +
                    "<span style='float:left;font-size:16px'>" +
                    innerHTML + "</span></div></div><br/>";
            } else {
                document.getElementById("msg").innerHTML +=
                    "<div style='height:auto;width:auto;margin-top:10px;'>" +
                    "<div style='float:right;width:600px;margin-top: 10px;'>" +
                    "<img src='<%=path%>/images/touxiang1.png' width=50px;height=50px; style='float:right;border-radius:15px'/>" +
                    "<div style='margin-right:10px;float:right;text-align: right;background-color:beige;border-radius:5px; border:1px solid black;width:200px;height:auto;margin-top:10px;'><span style='font-size:16px;'> " +
                    innerHTML +
                    "</span></div></div><br/>";
            }
        }

        function closeWebSocket() {
            websocket.close();
        }

        function send() {
            let message = document.getElementById("msgsend").value;
            websocket.send(message);
            document.getElementById("msgsend").value = " "; //设置清空文本框的值
        }
    </script>
    <script type="text/javascript">
        window.onkeydown = function() {
            var EventUtil = {};
            EventUtil.getEvent = function() {
                if (window.event) {
                    return window.event;
                } else {
                    return EventUtil.getEvent.caller.arguments[0];
                }
            }
            //绑定你的id为submit的按钮事件
            var button = document.getElementById("sendmsg");
            if (EventUtil.getEvent().keyCode == 13) {
                button.click();
                //取消事件的默认操作
                event.returnValue = false;
            }
        }
    </script>

</body>


<script type="text/javascript">


    $('#header').on('change', function (e) {
        var file=document.getElementById("header").value;

        if(file!=null && file!=""){
            var form=$("#longinForm");
            form.attr('action',''+'/luser/uploadHeader');
            form.submit();
        }
    });



</script>

</html>

